<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "海报");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
	.tab-horizontal{
		list-style: none;
	}
	.tab-horizontal li{
		list-style: none;
		min-width: 100px;
		float:left;
		text-align: center;
		height:1.8rem;
		line-height: 1.8rem;
		font-size: 0.8rem;
	}
	.tab-horizontal li.active > span{
		border-bottom: 3px solid #2196F3;
		font-weight: 800;
		color:#2196F3;
	}
	
	.tab-horizontal li > span{
		display: inline-block;
		width:calc(100% - 2.0rem);		
		margin-left: 1.0rem;
		margin-right: 1.0rem;
	}
	.tab-container{
		border-bottom: 1px solid #ddd;
		position: relative;
		width:100%;
		overflow: hidden;
		padding-bottom: 0.3rem;
		padding-top: 0.3rem;
	}
	
	.tab-content{
		display: none;
	}
	.tab-content.active{
		display: block;
	}
	
</style>
<style>

	.posterBox{
		float:left;
		width:30%;
		margin-left:2.5%;
		margin-top:0.5rem;
		margin-bottom:0.3rem;
	}
	.posterImg{
		width:100%;
	}
	.posterName{
		text-align:center;
		line-height:1.2;
		font-size:0.7rem;
	}
	
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>

	<div class="tab-container" data-id="claim-container" id="claim-tab">
		<ul class="tab tab-horizontal">
				<li data-id="tab1" class="active">
					<span>推荐</span>
				</li>
				<li data-id="tab2">
					<span>产品</span>
				</li>
				<li data-id="tab3">
					<span>节日</span>
				</li>
				<li data-id="tab4">
					<span>理念</span>
				</li>
		</ul>
	</div>

	<div id="claim-container">
		
		<div class="tab-content active" id="tab1">
			<div class="posterBox">
				<img class="posterImg" src="<c:url value='/images/we/invitationIndex/recommend1.jpg'/>" data-img="recommend1.jpg"/>
				<div class="posterName">邀请海报</div>	
		 	</div>
			<div class="posterBox">
					<img class="posterImg" src="<c:url value='/images/we/invitationIndex/recommend2.png'/>" data-img="recommend2.png"/>
				<div class="posterName">邀请海报</div>		
		 	</div>
			
		</div>
		
		<div class="tab-content" id="tab2">
			<div class="posterBox">
				<img class="posterImg" src="<c:url value='/images/we/invitationIndex/product1.png'/>" data-img="product1.png"/>
				<div class="posterName">邀请海报</div>	
		 	</div>
			<div class="posterBox">
				<img class="posterImg" src="<c:url value='/images/we/invitationIndex/product2.png'/>" data-img="product2.png"/>
				<div class="posterName">邀请海报</div>		
		 	</div>	
		</div>
		<div class="tab-content" id="tab3">
			<div class="posterBox">
				<img class="posterImg" src="<c:url value='/images/we/invitationIndex/recommend3.png'/>" data-img="recommend3.png"/>
				<div class="posterName">邀请海报</div>		
		 	</div>	
		</div>
		<div class="tab-content" id="tab4">
			<div class="posterBox">
				<img class="posterImg" src="<c:url value='/images/we/invitationIndex/recommend4.png'/>" data-img="recommend4.png"/>
				<div class="posterName">邀请海报</div>		
		 	</div>	
		</div>	
	</div>	



<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<script>
$(function(){
	$(".tab-container").each(function(){
		var $tabContainer=$(this);
		
		var liCount = $tabContainer.find(".tab-horizontal li").length;
		
		var ulWidth=$tabContainer.find(".tab-horizontal").width();
		
		var liWidth = ulWidth/liCount;

		$tabContainer.find(".tab-horizontal li").css("min-width",liWidth);
		
		
	});
	
	$(".tab-container .tab-horizontal li").on("click",function(){
		var $clickLi=$(this);
		var $tabContainer=$clickLi.parents(".tab-container");
		var containerId=$tabContainer.data("id");
		var contentId=$clickLi.data("id");
		
		$tabContainer.find("li.active").removeClass("active");
		$clickLi.addClass("active");
		
		$("#"+containerId+" .tab-content").removeClass("active");
		$("#"+containerId+" .tab-content#"+contentId).addClass("active");
	});
});
</script>
<script>
	$(function(){
		$(".posterImg").click(function(){
			var img = $(this).data("img");
			window.location.href=$.getVirtualPath()+"/wechat/cust/invitation/posterDetail?img="+img;
		});
	});
</script>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>

